<template>
    <el-table :data="item">
        <el-table-column prop="bookId" label="Id" >
        </el-table-column>
        <el-table-column prop="bookName" label="书名" >
        </el-table-column>
        <el-table-column prop="bookCounts" label="剩余数量" >
        </el-table-column>
        <el-table-column prop="detail" label="详情">
        </el-table-column>
        <el-table-column label="操作">
            <template slot-scope="scope">
                <el-button
                        size="mini"
                        @click="handleEdit(scope.$index, scope.row)">编辑</el-button>
                <el-button
                        size="mini"
                        type="danger"
                        @click="handleDelete(scope.$index, scope.row)">删除</el-button>
            </template>
        </el-table-column>
    </el-table>
</template>

<script>
    import qs from 'qs'

    export default {
        name: "Body",
        data() {
            return {
                item:[]
            }
        },
        created() {
            const _this = this;
            axios({
                url: 'http://127.0.0.1:8088/allBook'
            }).then(res => {
                console.log(res.data);
                _this.item = res.data;
            })
        },
        methods:{
            handleEdit(index,row){
                // console.log(index)
                // console.log(row)
                console.log(row.bookId);
                this.$router.replace({
                    name: 'Update',
                    params:{
                        bookId: row.bookId,
                        bookName: row.bookName,
                        bookCounts: row.bookCounts,
                        detail: row.detail,
                    }
                }).catch(()=>{})
            },
            handleDelete(index,row){
                const _this = this;
                axios({
                    method: "delete",
                    url: "http://127.0.0.1:8088/deleteBook",
                    headers:{"Content-Type":"application/x-www-form-urlencoded"},
                    data: qs.stringify({id : row.bookId})
                }).then(res => {
                    console.log('/delete=>'+res.data);
                    _this.$router.replace('/')
                }).catch(err => {
                    console.log(err)
                })
            }
        }
    }
</script>

<style scoped>

</style>